<template>
  <view class="coupon">
    <!-- <view @tap="jump">
      商铺
    </view> -->
    <up-tabs
      :list="couponTabs"
      :current="curTabsIdx"
      :line-width="rpx2px(72)"
      :line-height="rpx2px(20)"
      lineColor="#00B588"
      :itemStyle="couponTabStyle"
      key-name="badgeTypeName"
      @change="handleBadgeTypeTabsChange"
      :activeStyle="{
        color: '#303133',
        fontWeight: 'bold',
        transform: 'scale(1.05)',
      }"
    />
    <couponCard v-for="item in certificateData" :key="item.couponId" :listData="item" :manage="userInfo.enterpriseManger" :state="curTabsIdx"></couponCard>
    <view class="tail" v-if="certificateData.length !== 0">{{ tailText }}</view>
    <none-data v-if="certificateData.length == 0" />
     <!-- 登录弹窗 -->
     <loginDialog
      @on-off="getHome"
      @on-make="headelMake"
      :indicate="userLoginDialog"
    >
    </loginDialog>
  </view>
</template>

<script setup>
import {
  getUserInfoApi,
} from "@/api/user";
import loginDialog from "@/components/login/index.vue";
import { px2Rpx, rpx2px } from "@/utils/utils";
import { getUserCouponInfoPageApi } from "@/package_coupon/api/index.js";
import couponCard from "@/package_coupon/components/coupon-card/index.vue";
import { ref } from "vue";
import { onLoad, onReachBottom, onShow } from "@dcloudio/uni-app";
import { customNav } from "../../utils/customNav";

const userLoginDialog = ref(false);
const userLoginInfo = ref("");
const tailText = ref("");
const couponTabs = ref([
  {
    badgeTypeName: "未使用",
  },
  {
    badgeTypeName: "已失效",
  },
]);
const couponTabStyle = {
  flex: 1,
  fontSize: "31rpx",
  height: "80rpx!important",
};
const certificateData = ref([]);
const curTabsIdx = ref(0);
const pageIndx = ref(1);
const userInfo = ref({});
function handleBadgeTypeTabsChange(tab) {
  console.log(tab);
  console.log("curTabsIdx",curTabsIdx.value);
  curTabsIdx.value = tab.index;
  certificateData.value = [];
  getUserCouponInfoPage()
  
}
function getHome() {
  customNav("/pages/index/index")
}
function headelMake() {
  userLoginDialog.value = false;
  userLoginInfo.value = uni.getStorageSync("token");
}
async function getUserCouponInfoPage() {
  let pageData = {
    size: 10,
    page: pageIndx.value,
    type: `${curTabsIdx.value}`,
  };
  const res = await getUserCouponInfoPageApi(pageData);
  const { code, data } = res || {};
  if (code == 200) {
    console.log("getUserCouponInfoPageApi", data);
    if (certificateData.value.length == 0) {
      certificateData.value = data.records;
    } else {
      certificateData.value.concat(data.records);
    }
    if (data.total == certificateData.value.length) {
      tailText.value ="没有更多数据了"
    } else {
      tailText.value ="下滑加载更多"
    }
  }
}
function jump () {
  customNav("/package_payment/pages/index")
}
onReachBottom(() => {
  if (tailText.value ="下滑加载更多") {
    pageIndx.value++
    getUserCouponInfoPage();
  }
});
async function getUserInfo () {
  const res = await getUserInfoApi()
  const { code, data  } = res||{}
  if (code == 200) {
    userInfo.value =data;
  }
}
onLoad(() => {
  getUserInfo();
})
onShow(() => {
  getUserCouponInfoPage();
});
</script>

<style lang="less" scoped>
@import url(../lib/index.less);
</style>